<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="门店类型：">
						<el-select v-model="state.param.type" placeholder="请选择门店属性" @change="modeChange()">
							<el-option v-for="item in state.query.storeType" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="门店状态：">
						<el-select v-model="state.param.storeStatus" placeholder="请选择门店状态" @change="modeChange()">
							<el-option v-for="item in state.query.storeStatus" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="销售门店：">
						<el-select v-model="state.param.nodeId" placeholder="请选择门店" @change="search()">
							<el-option v-for="item in state.query.storeList" :key="item.id" :label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="数据类型：">
						<el-select v-model="state.param.dataType" placeholder="请选择门店属性" @change="modeChange()">
							<el-option v-for="item in state.query.dataTypeList" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="日期选择：">
						<section>
							<el-date-picker v-model="state.param.dateTime" type="daterange" unlink-panels
								:shortcuts="shortcuts" format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="-"
								:disabled-date="disabledDate" start-placeholder="开始日期" end-placeholder="结束日期" />
						</section>
					</el-form-item>
					<el-form-item label="服务数量：">
						<div class="flex rangeBox">
							<el-input-number placeholder="最小值" v-model="state.param.minNumValue" :controls="false"  />
							<div class="ml5 mr5">
								<span>-</span>
							</div>
							<el-input-number placeholder="最大值" v-model="state.param.maxNumValue" :controls="false" />
						</div>
					</el-form-item>
					<el-form-item label="消耗业绩：">
						<div class="flex rangeBox">
							<el-input-number placeholder="最小值" v-model="state.param.minPriceValue" :controls="false" />
							<div class="ml5 mr5">
								<span>-</span>
							</div>
							<el-input-number placeholder="最大值" v-model="state.param.maxPriceValue" :controls="false" />
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon> 搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon> 重 置
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" v-loading="state.loading" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">
					<AlertBox msg="总综合业绩：15010 元； 总销售业绩：6974 元；总储值卡业绩； 总充值业绩：8000 元； 总还款业绩：36 元； 总退款业绩：0。" />
					<el-table :data="state.tableData" v-loading="state.loading" v-if="state.param.dataType == 1">
						<el-table-column type="index" label="ID" width="90" />
						<el-table-column label="门店">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>门店名称</span>
							</template>
						</el-table-column>
						<el-table-column label="类型">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>直营/加盟</span>
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>正常/停业/打烊</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="订单业绩">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>9839</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="实付业绩">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>998.98</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="销售业绩">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>9839</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="充值业绩">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>9839</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="还款业绩">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>9839</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="退款业绩">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>9839</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<span class="pointer font16" style="color:var(--el-color-primary);" @click="onOpenEditRole()">详情</span>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
					<el-table :data="state.tableData" v-loading="state.loading" v-if="state.param.dataType == 2">
						<el-table-column type="index" label="ID" width="90" />
						<el-table-column label="门店">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>门店名称</span>
							</template>
						</el-table-column>
						<el-table-column label="类型">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>直营/加盟</span>
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>正常/闭店/休息</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="服务数量">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>例:50次</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="手工费">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>例:50.88</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="消耗业绩">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>例:50.88</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="人均服务数量">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span>次 -->
								<span>例:50.81</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="人均消耗业绩">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>例:50.81</span>
							</template>
						</el-table-column>
						<el-table-column  label="操作">
							<template #default="scope">
								<span class="pointer font16" style="color:var(--el-color-primary);" @click="onOpenEditRole()"> 详情 </span>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
					<el-table :data="state.tableData" v-loading="state.loading" v-if="state.param.dataType == 3">
						<el-table-column type="index" label="ID" width="90" />
						<el-table-column label="门店">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>门店名称</span>
							</template>
						</el-table-column>
						<el-table-column label="类型">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>直营/加盟</span>
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}</span> -->
								<span>正常/闭店/休息</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="新客数量">
							<template #default="scope">
								<!-- <span>{{ scope.row.id }}个</span> -->
								<span>例:53</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="消费金额">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>例:50.88</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="最低消费金额">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>例:50.88</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="最高消费金额">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>例:50.88</span>
							</template>
						</el-table-column>
						<el-table-column sortable label="平均消费金额">
							<template #default="scope">
								<!-- ￥<span>{{ scope.row.id }}</span>元 -->
								<span>例:50.88</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template #default="scope">
								<span class="pointer font16" style="color:var(--el-color-primary);" @click="onOpenEditRole()"> 详情 </span>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
								class="mt15" :pager-count="5" :page-sizes="[10, 20, 30,50,100,500,1000]"
								v-model:current-page="state.param.pageNum" background v-model:page-size="state.param.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<performanceDialog ref="performanceDialogRef" />
		<employeeListDialog ref="employeeListDialogRef" />
		<newCustomersDialog ref="newCustomersDialogRef" />
	</div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { orderQuery, storeNodeList, orderAddNote, orderCancel } from '/@/api/order';
import { specificationList } from '/@/api/commodity';
import { ElMessageBox, ElMessage, TabsPaneContext } from 'element-plus';
// 引入组件

// 引入组件
const performanceDialog = defineAsyncComponent(() => import('/@/views/statistical/operating/components/performanceDialog.vue'));
const employeeListDialog = defineAsyncComponent(() => import('/@/views/statistical/operating/components/employeeListDialog.vue'));
const newCustomersDialog = defineAsyncComponent(() => import('/@/views/statistical/operating/components/newCustomersDialog.vue'));

// 定义变量内容
const performanceDialogRef = ref();
const employeeListDialogRef = ref();
const newCustomersDialogRef = ref();
const state = reactive({
	param: {
		mode: null, // 门店类型  null(默认) 全部 0 直营  1 加盟
		storeStatus: -1,
		nodeId: null, // 门店id
		dataType: 1,
		// 销售渠道
		channel: null,
		status: null,
		dateTime: [],
		startTime: "",// 开始时间
		endTime: "",// 结束时间 
		maxNumValue: null, //服务次数
		minNumValue: null,
		maxPriceValue: null,
		minPriceValue: null,
		timeInterval: 3, // 默认 null  时间范围  0 本月 1 本季度  2 今年  3 自定义时 须 startTime 和 endTime 时间可为null
		keyword: "",
		type: 1,
		pageNum: 1,
		pageSize: 10,
	},
	query: {
		storeType: [
			{ value: -1, label: '全部' },
			{ value: 0, label: '直营' },
			{ value: 1, label: '加盟' }
		],
		storeStatus: [
			{ value: -1, label: '全部' },
			{ value: 1, label: '正常' },
			{ value: 2, label: '闭店' },
			{ value: 3, label: '休息' }
		],
		storeList: [] as Array<any>,
		dataTypeList: [
			{ value: 1, label: '经营报表' },
			{ value: 2, label: '服务消耗报表' },
			{ value: 3, label: '新客户报表' }
		],
	},
	loading: false,
	total: 0,
	tableData: [] as Array<any>
});

const shortcuts = [
	{
		text: '本月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.setDate(1))
			return [start, end]
		},
	},
	{
		text: '近一个月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
			return [start, end]
		},
	},
	{
		text: '近三个月',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
			return [start, end]
		},
	},
	{
		text: '近半年',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
			return [start, end]
		},
	},
	{
		text: '近一年',
		value: () => {
			const end = new Date()
			const start = new Date()
			start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
			return [start, end]
		},
	},
]

onMounted(() => {
	// 获取订单列表
	getOrderList();
	// 获取门店列表
	getStoreNodeList();
})

const disabledDate = (time: Date) => {
	return time.getTime() > Date.now()
}

// 获取订单列表
const getOrderList = async () => {
	const { results } = await specificationList(state.param);
	// state.loading = false;
	state.tableData = results.records
	state.total = results.total;
}

// 搜索
const search = () => {
	console.log(state.param)
	if (state.param.dateTime?.length == 2) {
		state.param.startTime = state.param.dateTime[0]
		state.param.endTime = state.param.dateTime[1]
	}
	state.param.pageNum = 1;
	getOrderList()
}


/**
 * 获取门店列表
 * mode  null /全部   0直营  1加盟
 */
const getStoreNodeList = async () => {
	const { results } = await storeNodeList({ mode: null, current: 1, size: 50 });
	let no1 = [{ id: null, name: '全部' }]
	state.query.storeList = [...no1, ...results.records];
}

const handleClick = (tab: TabsPaneContext) => {
	let select = tab.props.name
	if (select != state.param.type) {
		state.param.pageNum = 1;
		state.param.type = select! as any;  //赋值 赋值是 + select!?  + 代表把字符串转为数字  ！ 是TS里面非空符号
		getOrderList();
	}
}


// 订单详情
const onOpenEditRole = (item?: any) => {
	if (state.param.dataType == 1) {
		performanceDialogRef.value.openDialog();
	} else if (state.param.dataType == 2) {
		employeeListDialogRef.value.openDialog();
	} else if (state.param.dataType == 3) {
		newCustomersDialogRef.value.openDialog();
	}
};


// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getOrderList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getOrderList();
};

// 添加备注
const addNote = (snkey: String) => {
	ElMessageBox.prompt(`商家备注`, '备注', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		inputPattern: /^.+$/,
		inputErrorMessage: '请输入备注',
	}).then(async ({ value }) => {
		let params = {
			snkey: snkey,
			note: value
		}
		let res = await orderAddNote(params);
		console.log(res)
		getOrderList();
		ElMessage.success('添加成功');
	}).catch(() => {
		ElMessage({
			type: 'info',
			message: '已取消',
		})
	})
}

// 撤销订单
const onRevokeOrder = (id: number, index: number) => {
	ElMessageBox.prompt(
		`您现在操作的是撤销订单，请慎重;该操作会使订单无效，同时用户消费数据、员工业绩、商品销量等相关数据均会撤销（恢复为之前的状态或数据）; 是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		inputPattern: /^.+$/,
		inputErrorMessage: '请输入订单撤销原因',
	}).then(async ({ value }) => {
		let params = {
			id: id,
			reason: value
		}
		let res = await orderCancel(params);
		console.log(res)
		state.tableData[index].status = '已撤销'
		ElMessage.success('撤销成功');
	}).catch(() => {
		ElMessage({
			type: 'info',
			message: '已取消',
		})
	})
};

// 订单改价
const changePrice = async (item: any) => {
	changePriceDialogRef.value.openDialog(item);
}

// 订单发货
const deliverFun = (item: any) => {
	deliverGoodDialogRef.value.openDialog(item);
}


// 销售员工过滤器
const rebateListFilters = (item: any) => {
	let arr = item[0].rebateList
	if (Array.isArray(arr)) {
		let newArr = arr.map((obj: { id: any, employee: any, money: any; }) => obj.employee);
		let uniqueArr = [...new Set(newArr)];
		return uniqueArr.join('、')
	} else {
		return '--'
	}
}

// 门店类型切换 (如果不是全部则清空选中门店 以及订单选中状态)
const modeChange = () => {
	if (state.param.mode != null) {
		state.param.nodeId = null
		state.param.status = null
	}
}
</script>
<style scoped lang="scss">
:deep(.el-card__body){
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table{
		flex: 1;
		.el-table__inner-wrapper::before{
			background: none !important;
		}
	}
}

</style>
